<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dev tools</title>
    
    <script src="../jquery.js"></script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #wrapper{
            display: flex;
            margin: 100px 300px;
            border: 1px solid #ccc;
            background-color: #f5f6f7; 
            justify-content: space-between;
            
        } 
        .box { 
            height: 300px; 
            width: 19%; 
            font-size: 72px;
            text-align: center;
            line-height: 100%;
        }
        .green {
            background-color: aquamarine;
        }
        .purple {
            background-color: blueviolet;
        }
        .blue {
            background-color: azure;
        }
        .yellow {
            background-color: bisque;
        }
        .brown {
            background-color: brown;
        }
    </style>
    <script>            
        $(function() {
//            $(".box").delegate("button", "click", function(){
//               $(this).parent().text("");
//            });
            
            var boxes = document.querySelectorAll(".box"); 
            console.assert(boxes.length < 10, "boxes number must  be great than 10");
            
            var i = 0;
            for (var len = boxes.length; i < len; i++) {
                
                boxes[i].addEventListener("click", function() {
                    this.innerHTML = "";
                }, true);
                console.log("yes");
                console.info("yes");
            } 
            
            
        });
    </script>
</head>
<body>
   <div id="wrapper"> 
        <div class="box blue">box1<br><button>clear</button></div>
        <div class="box yellow">box2<br><button>clear</button></div>
        <div class="box purple">box3<br><button>clear</button></div>
        <div class="box green">box4<br><button>clear</button></div>
        <div class="box brown">box4<br><button>clear</button></div>
   </div>
</body>
</html>